<template>
  <div class="main">
    <div class="common-layout">
      <el-container>
        <el-header>
          <el-carousel :interval="4000" type="card" height="400px">
            <el-carousel-item v-for="item in photosItem" :key="item">
              <h3 text="2xl" justify="center">
                <el-image style="width: 100%; height: 100%" :src="item.photos" />
              </h3>
            </el-carousel-item>
          </el-carousel>
        </el-header>
        <el-main>
          <!-- 新鲜好物 -->
          <LineItem id="title1" v-if="newGoods">
            <template #header-slot>
              <div class="title-slot">新鲜好物</div>
              <div class="title-slot-small">新鲜出炉 品质保证</div>
            </template>
            <template #main>
              <GoodItem v-for="(item, index) in newGoods" :key="index" :item="item"></GoodItem>
              <el-empty v-if="newGoods.length == 0" description="暂无商品" />
            </template>
          </LineItem>
          <el-divider />
          <!-- 人气推荐 -->
          <LineItem id="title2" v-if="highRate">
            <template #header-slot>
              <div class="title-slot">人气推荐</div>
              <div class="title-slot-small">人气爆款 不容错过</div>
            </template>
            <template #main>
              <GoodItem v-for="(item, index) in highRate" :key="index" :item="item"></GoodItem>
              <el-empty v-if="highRate.length == 0" description="暂无商品" />
            </template>
          </LineItem>
          <el-divider />
          <!-- 品优价惠 -->
          <LineItem id="title3" v-if="goodPrice">
            <template #header-slot>
              <div class="title-slot">品优价惠</div>
              <div class="title-slot-small">品质优良 价格优惠</div>
            </template>
            <template #main>
              <GoodItem v-for="(item, index) in goodPrice" :key="index" :item="item"></GoodItem>
              <el-empty v-if="goodPrice.length == 0" description="暂无商品" />
            </template>
          </LineItem>
          <div class="sidebar">
            <div class="sidebar-item"><a href="#title1">新鲜好物</a></div>
            <div class="sidebar-item"><a href="#title2">人气推荐</a></div>
            <div class="sidebar-item"><a href="#title3">品优价惠</a></div>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script setup>
import { getMajorGoods } from '@/api/goods'
import GoodItem from '@/components/GoodsItem.vue'
import LineItem from '@/components/LineItem.vue'
import { ref } from 'vue'

// 轮播图展示
const photosItem = [
  {
    search: '',
    photos: 'src/assets/photos1.png'
  },
  {
    search: '',
    photos: 'src/assets/photos2.png'
  },
  {
    search: '',
    photos: 'src/assets/photos3.png'
  },
  {
    search: '',
    photos: 'src/assets/photos4.png'
  }
]

const newGoods = ref()
const highRate = ref()
const goodPrice = ref()

const getGoodsShow = async () => {
  const res = (await getMajorGoods()).data
  return res
}

const getGoodsInfoAllShow = async () => {
  newGoods.value = (await getGoodsShow()).data
  highRate.value = (await getGoodsShow()).data
  goodPrice.value = (await getGoodsShow()).data
}

await getGoodsInfoAllShow()
</script>

<style scoped>
.el-header,
.el-main {
  background-color: white;
}

.el-header {
  height: 450px;
  margin-bottom: 20px;
  padding-top: 20px;
}

/* 固定导航 */
.sidebar {
  position: fixed;
  z-index: 5;
  top: 50%;
  right: 1%;
  width: 80px;
  background-color: #f5f5f5;
  padding: 10px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  font-size: 12px;
  border-radius: 5px;
  opacity: 0.6;
  transition: 0.5s all;
  box-shadow: -3px 3px 20px -5px rgba(0, 0, 0, 0.75);
}

.sidebar:hover {
  opacity: 0.9;
}

.sidebar-item {
  display: flex;
  align-items: center;
  padding: 15px 10px;
  cursor: pointer;
  transition: all 0.3s;
}

.sidebar-item a {
  text-decoration: none;
  color: black;
  transition: all 0.3s;
}

.sidebar-item a:hover {
  color: rgb(255, 112, 15);
}

.sidebar-item:hover {
  background-color: #e0e0e0;
}
</style>
